<template>
  <div id="header">
    <div class="wrapper">
      <a href="index.html" class="logo">
        <img src="./image/yixiaoping.png" width="229" height="43" alt="易小聘"/>
      </a>
      <ul  id="navheader">
        <li :class="{'current':activeIndex==1}"
            @click="goHome">
          <a>首页</a>
        </li>
        <li :class="{'current':activeIndex==2}"
            @click="goJobFair()">
          <a>招聘会</a>
        </li>
        <li :class="{'current':activeIndex==3}"
            v-if="isUser"
            @click="goResume()">
          <a>我的简历</a>
        </li>
        <li :class="{'current':activeIndex==3}"
            v-if="isHr"
            @click="goHrWork()">
          <a>工作台</a>
        </li>
        <li :class="{'current':activeIndex==4}"
            v-if="isUser"
            @click="goDelivery()">
          <a>投递记录</a>
        </li>
        <li :class="{'current':activeIndex==5}"
            @click="goNewsAll()">
          <a>新闻快递</a>
        </li>
      </ul>
      <ul class="loginTop" >
        <li v-if="isUser===isHr"><a rel="nofollow">
          <a @click="goLogin">登录</a>
        </a></li>
        <li v-if="isUser===isHr"><a rel="nofollow">
          <a @click="goRegister">注册</a>
        </a></li>

        <el-dropdown v-if="isUser" @command="userCommend">
          <span class="el-dropdown-link" >
            <li>欢迎您，求职者：{{form.user.userName}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </li>
          </span>
          <el-dropdown-menu slot="dropdown">
          <el-dropdown-item  command="1"><a>我的简历</a></el-dropdown-item>
          <el-dropdown-item command="2"><a>我收藏的职位</a></el-dropdown-item>
          <el-dropdown-item command="3"><a>我的投递记录</a></el-dropdown-item>
          <el-dropdown-item divided command="4"><a>注销</a></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-dropdown v-if="isHr" @command="hrCommend">
          <span class="el-dropdown-link">
            <li>欢迎您，HR：{{form.hr.hruserName}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </li>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1"><a>我的公司</a></el-dropdown-item>
            <el-dropdown-item command="2"><a>我的职位</a></el-dropdown-item>
            <el-dropdown-item command="3"><a>参加的招聘会</a></el-dropdown-item>
            <el-dropdown-item divided command="4"><a>注销</a></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>


      </ul>


    </div>
  </div><!-- end #header -->
</template>

<script>
  export default {
    name: "header",
    data() {
      return {
        isUser: false,
        isHr: false,
        form: { //用户
          user: {},
          hr: {}
        },
      }
    },
    props: {
      activeIndex:{
        default:1
      }
    },
    methods: {
      userCommend(command){//user的个人下拉菜单
        switch (command){
          case '1':
            this.goResume();
            break;
          case '2':
            this.goJobCollection();
            break;
          case '3':
            this.goDelivery();
            break;
          case '4':
            this.userLogOut();
            break;
        }
      },
      hrCommend(command){//hr的个人下拉菜单
        switch (command){
          case '1':
            this.myCompany();
            break;
          case '2':
            this.OpenPosition();
            break;
          case '3':
            break;
          case '4':
            this.hrLogOut()
            break;
        }
      },
      //前往主页
      goHome(){
        this.activeIndex=1;
        this.$router.push("/")
      },
      goJobFair(){
        this.$router.push("/jobFair")
      },
      //前往简历
      goResume(){
        console.log(this.activeIndex);
        this.$router.push("/resume")
      },
      goCompanyDetail(){
        this.$router.push("/CompanyDetail")
      },
      goJobCollection(){
        this.$router.push("/jobCollection")
      },
      goLogin(){
        this.$router.push("/login")
      },
      //前往注册页面
      goRegister(){
        this.$router.push("/register")
      },
      //用户注销
      userLogOut(){
        this.$store.dispatch("setUser",{});
        this.isUser = false;
        window.sessionStorage.removeItem("user");
        this.$router.push("/login")

      },
      //hr注销
      hrLogOut(){
        this.$store.dispatch("setHr",{});
        this.isHr = false;
        window.sessionStorage.removeItem("hr");
        this.$router.push("/login");

      },
      OpenPosition() {
        this.$router.push("/hrWork/openPosition")
      },
      goHrWork(){
        this.$router.push("/hrWork")
      },
      goDelivery(){
        this.$router.push("/userWork/delivery")
      },
      myCompany(){
        this.$router.push("/hrWork/myCompany")
      },
      goNewsAll(){
        this.$router.push("/UserNewsList")
      }

    },
    created() {
      this.form.user = this.$store.state.user;
      this.form.hr = this.$store.state.hr;
      if (JSON.stringify(this.form.user) !== "{}") {
        this.isUser = true
      } else if (JSON.stringify(this.form.hr) !== "{}") {
        this.isHr = true
      }
    }
  }
</script>

<style scoped>

  #navheader {
    float: left;
    position: relative;
    margin-left: 30px;
    font-size: 0;
  }

  #navheader li {
    height: 60px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    position: relative;
    z-index: 3;
    margin: 0;
    padding: 0 20px;
  }

  #navheader li.current {
    z-index: 1;
  }

  #navheader li a {
    height: 57px;
    line-height: 57px;
    font-size: 20px;
    color: #999;
    float: left;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }

  #navheader li.current a {
    color: #333;
    border-bottom: 3px solid #019875;
  }


  #navheader li a:hover {
    color: #333;
  }

  #navheader li i {
    position: absolute;
    right: -10px;
    top: 10px;
    width: 23px;
    height: 15px;
    background: url(./image/icon_new.png) right top no-repeat;
  }

  #navheader li b {
    font-size: 12px;
    line-height: 18px;
    font-weight: 100;
    position: absolute;
    left: 100px;
    top: 10px;
    color: #fff;
    background: #fd470c;
    padding: 0 5px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
  }

  #header {
    min-width: 1024px;
    height: 60px;
    background: #fafafa;
    border-top: 3px solid #019875;
  }

  #header .wrapper {
    width: 1024px;
    margin: 0 auto;
    position: relative;
    z-index: 90;
  }

  #header ul.loginTop {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    right: 0;
    top: 0;
    overflow: hidden;
  }

  #header ul.loginTop li {
    float: left;
    color: #fff;
    height: 22px;
    background: #019875;
    padding: 4px 0;
  }

  #header ul.loginTop a {
    color: #fff;
    padding: 0 12px;
  }

  #header ul.loginTop a:hover {
    color: #cceae3;
  }

  #header dl {
    float: right;
    *max-width: 170px;
    color: #fff;
    background: #019875;
    position: absolute;
    right: 0;
    z-index: 101;
    cursor: pointer;
    line-height: 30px;
  }

  #header dt {
    display: block;
    position: relative;
    color: #fff;
    padding: 0 40px 0 20px;
    background: #019875;
    min-width: 105px;
    overflow: hidden;
  }

  #header dt span {
    float: left;
  }

  #header dt span.red {
    width: 9px;
    height: 9px;
    background: url(./image/noticeDot.png) no-repeat;
    margin: 11px 0 0 10px;
  }

  #header dt i {
    position: absolute;
    top: 14px;
    right: 25px;
    border: 4px solid #fff;
    border-color: #fff #019875 #019875;
    display: block;
    font-size: 0px;
    height: 0;
    width: 0;
    -webkit-transition: transform 0.2s ease 0s;
    -moz-transition: transform 0.2s ease 0s;
    -o-transition: transform 0.2s ease 0s;
    transition: transform 0.2s ease 0s;
  }

  #header dt:hover i, #header dl.expend dt i {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
    top: 12px;
    border-color: #019875 #019875 #fff #019875 \9;
  }

  #header dd {
    display: none;
  }

  #header dd.btm {
    border-bottom: 1px dashed #34ad91;
  }

  #header dd a {
    display: block;
    color: #fff;
    padding: 0 20px;
    background: #019875;
  }

  #header dd a:hover, #header dd a.current {
    background: #91cebe;
  }

  #header dd a span.red {
    color: #fff;
    font-size: 12px;
    float: right;
    padding-top: 1px;
    *margin: -32px 0 0 0;
  }

  .logo {
    border: 0;
    float: left;
    margin: 10px 0 0 0;
  }
  .el-dropdown-link{
    background-color: #0d9572;
    height: 60px;
  }

</style>